<template>
    <div class="login-form">
        <el-input v-model="smsInfo.phone" placeholder="请输入你的手机号码" maxlength="11" class="ipt" @keyup.enter="vailatePhone() ? null : handleNext()" />
        <el-input v-model="smsInfo.code" placeholder="请输入图形验证码" maxlength="4" class="ipt" @keyup.enter="vailatePhone() ? null : handleNext()">
            <template #append>
                <img :src="codeImg" :disabled="vailatePhone()" @click="handleCapcha" />
            </template>
        </el-input>
        <el-button class="btn" :disabled="vailatePhone()" @click="handleNext">
            <span>下一步</span>
        </el-button>
        <div v-show="showErorMsg" class="toast">
            <span>{{ errorMsg }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineExpose, ref, reactive, onMounted } from 'vue';
import { checkPmUserPhone4Login } from '@/api/login';

import { regex } from '@x-tech/fe-utils';
import { ErrorType, SmsInfo } from '../loginType';
import { uuid } from '@x-tech/fe-utils/dist/misc';

function errorTypeToString(type: ErrorType) {
    switch (type) {
        case ErrorType.USER_NOT_EXIST:
            return '用户不存在';
        case ErrorType.USER_NOT_ACTIVE:
            return '用户未激活, 请联系在线客服';
        case ErrorType.USER_STATUS_ILLEGAL:
            return '用户状态不合法';
        case ErrorType.USER_NOT_PERMISSION:
            return '用户无权限';
        default:
            return '';
    }
}

const emits = defineEmits(['next']);

const smsInfo = reactive<SmsInfo>({
    phone: '',
    code: '',
    clientId: '',
    type: '1',
});

const showErorMsg = ref(false);

// 验证手机号是否合法
const vailatePhone = (): boolean =>
    smsInfo.phone.length !== 11 || !regex.checkChinaPhone(smsInfo.phone) || showErorMsg.value ||smsInfo.code.length !== 4;

const errorMsg = ref('');

const codeImg = ref('');

const handleCapcha = async () => {
    smsInfo.clientId = uuid();
    codeImg.value = window.XCConfig.VITE_URL + `/md/image/verifyCode?clientId=${smsInfo.clientId}`;
};

// 下一步
const handleNext = async () => {
    if (!regex.checkChinaPhone(smsInfo.phone)) {
        return;
    }
    try {
        const code = await checkPmUserPhone4Login(smsInfo.phone);
        if (code !== 0) {
            errorMsg.value = errorTypeToString(code);
            showErorMsg.value = true;

            setTimeout(() => {
                showErorMsg.value = false;
                errorMsg.value = '';
            }, 1000);
            return;
        }
        emits('next', {
            code: smsInfo.code,
            phone: smsInfo.phone,
            clientId: smsInfo.clientId,
        });
    } catch (error) {
        console.log(error);
    }
};

const resetCapcha = () => {
    smsInfo.code = '';
    handleCapcha();
};

onMounted(() => {
    handleCapcha();
});

// 对外暴露可执行方法
defineExpose({
    resetCapcha,
});
</script>

<style lang="scss" scoped>
// 手机号登录
.login-form {
    position: relative;

    .btn {
        width: 100%;
        margin-top: 34px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        background: #e60044;
        color: #fff;
        border: none;
        height: 40px;

        &.is-disabled {
            background: #f380a1;
        }
    }
}

.toast {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 40px;
    padding: 0 12px;
    background-color: #feeeed;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 10%;
    border-radius: 4px;
}
::v-deep(.el-input__inner) {
    height: 36px !important;
    line-height: 36px;
}
.ipt + .ipt {
    margin-top: 20px;
}
</style>
